<template>
	<view class="contain   bg-[#f2f2f2] p-2">
		<view class="text-[red] text-[12px] ">
			*提示：如果您有转账以下账户，请提交转账信息，客服审核通过后
			完成转账。
				<uv-button @click="open" type="success" class="w-[80px] float-right" size="mini" text="微信充值入口"></uv-button>
		</view>
		
		<view class="list mt-4 ">
			<view class=" item bg-white mb-2 p-2 pt-4 pb-4"  v-for=" i in 2">
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						银行账户:
					</view>
					<view class="w-[70%]    text-[#666666]">
						44201504200052532210
					</view>
				</view>
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						银行名称:
					</view>
					<view class="w-[70%]    text-[#666666]">
						支付宝
					</view>
				</view>
				<view class="flex w-full ">
					<view class="w-[30%]  text-[#78848a]">
						户口持有人:
					</view>
					<view class="w-[70%]    text-[#666666]">
						深圳市前海新和泰供应施有限公司
					</view>
				</view>
				<view class="flex w-full flex-row-reverse pt-2">
						<uv-button type="primary" class="w-[80px] float-right" size="small" text="转账申报"></uv-button>
				</view>
			</view>  
			
		</view>
		<!-- 微信充值入口 -->
		<uv-popup ref="popup" mode="right" @change="change" class="w-full ">
					 <view class="bg-[#f2f2f2] p-2 h-full w-[100vw]  ">
					 		 <view class="bg-white flex items-center justify-between pl-2 rounded">
					 		<text class="text-[red] text-[12px] ">
								其他方式支付宝/银行卡)转充值请申报转账信息。
							</text> <uni-icons color="#8198b6" type="right" size="16"></uni-icons>
					 		 </view>
							 
							 <uv-form labelWidth="80" labelPosition="left" :model="form" :rules="rules" ref="form">
							 			<uv-form-item label="姓名:" prop="form.userId" borderBottom>
							 				<uv-input disabled v-model="form.userId" border="none">
							 				</uv-input>
							 			</uv-form-item>
										<uv-form-item label="会员昵称:" prop="form.userName" borderBottom>
							 				<uv-input disabled v-model="form.userName" border="none">
							 				</uv-input>
							 			</uv-form-item>
											<uv-form-item clearable  labelWidth="100" label="充值金额￥:" prop="form.userName" borderBottom>
							 				<uv-input v-model="form.qian"  placeholder="请输入充值金额"  border="none">
							 				</uv-input>
							 			</uv-form-item>
										
										</uv-form>
							 <uv-button type="primary" text="充值"></uv-button>
					 </view>
					 
				</uv-popup>
	</view>
</template>

<script setup>
	const form = ref({
		userId:23130,
		userName:'你好世界',
		qian:''
	})
	const popup = ref(null) // popup对象
	const rules = ref([])
	
	const open = () => {
		popup.value.open();
	}
	const change = (e) => {
		console.log('弹窗状态改变：',e);
	}
</script>

<style>
	.contain { 
		height: calc(100vh - 44px);
		.uv-popup .uv-popup__content.right  { 
		    width: 100vw;
		}
}
</style>
